<template>
  <div class="save">
    <div class="top">
      <img src="@/assets/img/success.png" alt="" />
      <span>绘制完成</span>
    </div>
    <div class="wrap">
      <section>
        <div class="name">测绘ID:</div>
        <div class="value">{{ mapState.currentId }}</div>
      </section>
      <section>
        <div class="name">测绘面积:</div>
        <div class="value">{{ mapState.area }}</div>
      </section>
    </div>
    <div class="wrap">
      <span>*</span>
      <div class="name">区域颜色:</div>
      <div
        @click="handleSelectColor('#3B60E6')"
        :class="{ active: state.currColor === '#3B60E6' }"
        class="color"
      ></div>
      <div
        @click="handleSelectColor('#28BDD9')"
        :class="{ active: state.currColor === '#28BDD9' }"
        class="color"
      ></div>
      <div
        @click="handleSelectColor('#EBB143')"
        :class="{ active: state.currColor === '#EBB143' }"
        class="color"
      ></div>
      <div
        @click="handleSelectColor('#FF5041')"
        :class="{ active: state.currColor === '#FF5041' }"
        class="color"
      ></div>
      <div
        @click="handleSelectColor('#E63BB0')"
        :class="{ active: state.currColor === '#E63BB0' }"
        class="color"
      ></div>
    </div>
    <div class="wrap">
      <div class="left">
        <RtSelect v-model="state.linkedSoil">
          <template #prefix>关联地块</template>
          <RtOptionSelect
            v-for="v in state.siteList"
            :label="v.label"
            :value="v.id"
            :key="v.id"
          ></RtOptionSelect>
        </RtSelect>
      </div>
      <div class="right" @click="handleJump">新建地块</div>
    </div>
    <div @click="save" class="button">
      <img src="@/assets/img/save.png" alt="" />
      <span>保存</span>
    </div>
  </div>
</template>

<script setup>
  import { reactive, defineEmits, onMounted } from 'vue';
  import RtSelect from '@/components/selection/rtSelect.vue';
  import RtOptionSelect from '@/components/selection/rtOption.vue';
  import { getSiteList, updateSite } from '@/api/map';
  import { mapState, defaultPolygonOption } from '@/store';
  import { $toast } from '@/components/toast/index'

  const emits = defineEmits(['setColor', 'toDetail']);

  const props = defineProps({
    pointList: {},
  });

  const state = reactive({
    currColor: '#3B60E6',
    linkedSoil: '',
    siteList: [],
  });

  const handleSelectColor = color => {
    state.currColor = color;
    emits('setColor', color);
  };

  const setSiteList = async () => {
    try {
      const res = await getSiteList();
      state.siteList = res.data.map(v => ({
        ...v,
        id: v.id,
        label: v.landName,
      }));
    } catch (error) {
      console.error(error);
    }
  };

  const handleJump = () => {
    try {
      wx.miniProgram.redirectTo({
        url: `/pagesPlant/plant-land/add?polygonId=${mapState.currentId}`,
      });
    } catch (error) {
      console.error(error);
      alert(error);
    }
  };

  const save = async () => {
    try {
      const params = {
        id: mapState.currentId,
        landId: state.linkedSoil,
        config: JSON.stringify({
          points: props.pointList,
          config: {
            ...defaultPolygonOption,
            color: state.currColor,
            fillColor: state.currColor,
          },
        }),
      };
      const _area = state.siteList.find(v => v.id === state.linkedSoil).area;
      let flag
      if (parseInt(mapState.area) !== parseInt(_area)) {
        flag = await $toast({
          title: '绑定提醒',
          text: `当前测绘区域测绘面积为${mapState.area}亩，是否更新至所选地块的面积`,
          leftButtonText: '仅绑定',
          rightButtonText: '绑定并更新',
        });
      }
      if (flag === 'clickRight') params.area = mapState.area;
      const res = await updateSite(params)
      emits('toDetail');
    } catch (error) {
      console.error(error);
    }
  };

  onMounted(() => {
    setSiteList();
  });
</script>

<style lang="scss" scoped>
  .save {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .top {
    display: flex;
    justify-content: center;
    margin-bottom: 0.22rem;

    img {
      height: 0.28rem;
      width: 0.28rem;
      margin-right: 0.16rem;
    }

    span {
      font-size: 0.28rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #585858;
      line-height: 0.44rem;
    }
  }

  .wrap {
    height: 0.84rem;
    border-radius: 0.16rem;
    margin-bottom: 0.24rem;
    padding: 0 0.2rem;

    &:nth-of-type(2) {
      background: #f1f1f1;
      display: flex;
      justify-content: space-between;
      align-items: center;

      section {
        display: flex;

        .name {
          font-size: 0.28rem;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #7e7e7e;
          line-height: 0.4rem;
          margin-right: 0.1rem;
        }

        .value {
          font-size: 0.28rem;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #1e1e1e;
          line-height: 0.4rem;
        }
      }
    }

    &:nth-of-type(3) {
      border: 0.01rem solid #d8d8d8;
      display: flex;
      align-items: center;

      span {
        color: red;
      }

      .name {
        font-size: 0.28rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #7e7e7e;
        line-height: 0.4rem;
        margin-right: 0.2rem;
      }

      .color {
        width: 0.35rem;
        height: 0.35rem;
        border-radius: 0.08rem;
        margin-right: 0.5rem;

        &:nth-last-of-type(1) {
          margin-right: 0;
        }

        &.active {
          display: flex;

          &::after {
            content: ' ';
            width: 100%;
            height: 100%;
            display: block;
            background-image: url('~@/assets/img/selected.png');
            background-size: 67% 67%;
            background-position: center center;
            background-repeat: no-repeat;
            font-size: 0;
          }
        }

        &:nth-of-type(2) {
          background: #3b60e6;
        }

        &:nth-of-type(3) {
          background: #28bdd9;
        }

        &:nth-of-type(4) {
          background: #ebb143;
        }

        &:nth-of-type(5) {
          background: #ff5041;
        }

        &:nth-of-type(6) {
          background: #e63bb0;
        }
      }
    }

    &:nth-of-type(4) {
      display: flex;
      align-items: stretch;
      padding: 0;

      .left {
        flex: 1 1 auto;
        margin-right: 0.2rem;
      }

      .right {
        width: 1.8rem;
        flex: 0 0 auto;
        line-height: 0.84rem;
        text-align: center;
        color: #fff;
        background: #3b60e6;
        border-radius: 0.16rem;
      }
    }
  }

  .button {
    width: 1.65rem;
    height: 0.52rem;
    background: rgba(59, 96, 230, 0.1);
    border-radius: 0.16rem;
    position: absolute;
    top: 0.38rem;
    right: 0.32rem;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      height: 0.26rem;
      width: 0.26rem;
      margin-right: 0.2rem;
    }

    span {
      font-size: 0.26rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #3b60e6;
    }
  }
</style>
